<template>
  <el-row>
    <el-col :span="isLineFeed ? 24 : 11">
      <el-date-picker
        :value-format="dateType"
        :disabled="disabled"
        @change="changeStart"
        :picker-options="pickerBeginDateBefore"
        type="date"
        :size="size"
        :clearable="empty"
        placeholder="开始日期"
        v-model="dateStart"
        style="width: 100%"
      ></el-date-picker>
    </el-col>
    <el-col class="shortLine" :span="isLineFeed ? 24 : 2">-</el-col>
    <el-col :span="isLineFeed ? 24 : 11">
      <el-date-picker
        :value-format="dateType"
        :disabled="disabled"
        @change="changeEnd"
        :picker-options="pickerBeginDateAfter"
        type="date"
        :size="size"
        :clearable="empty"
        placeholder="结束日期"
        v-model="dateEnd"
        style="width: 100%"
      ></el-date-picker>
    </el-col>
  </el-row>
</template>

<script>
import moment from 'moment';
import {Row,Col,DatePicker} from 'element-ui';

export default {
  components:{
    [Row.name]:Row,
    [Col.name]:Col,
    [DatePicker.name]:DatePicker,
  },
  props: {
    // 是否换行
    isLineFeed: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    empty: { type: Boolean, default: false },
    // 指定日期
    selData: {
      type: Object,
      default: () => {},
    },
    // 新增政策页面，政策返点模块id
    dataId: {
      type: Number,
      default: -1,
    },
    // 组件框size大小
    size: {
      type: String,
      default: 'large',
    },
    // 日期格式
    dateType: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss',
    },
  },
  data () {
    return {
      // 默认查询时间(月初到当前时间)
    defaultDateStart: `${moment().format('YYYY-MM-01')} 00:00:00`,
    defaultDateEnd: moment().format('YYYY-MM-DD hh:mm:ss'),
      dateStart: '',
      dateEnd: '',
      // 设置时间选择框限制
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          const beginDateVal = this.dateEnd;
          if (beginDateVal) {
            return time.getTime() >= new Date(beginDateVal).getTime();
          }
        },
      },
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          const beginDateVal = this.dateStart;
          if (beginDateVal) {
            return time.getTime() <= new Date(beginDateVal).getTime() - 1000 * 60 * 60 * 24;
          }
        },
      },
    };
  },
  methods: {
    changeStart (val) {
      this.$emit('change-date', 0, val);
    },
    changeEnd (val) {
      this.$emit('change-date', 1, val);
    },
    reset () {
      if (!this.empty) {
        if (this.selData && this.selData.selDateStart) {
          this.dateStart = this.selData.selDateStart;
          this.dateEnd = this.selData.selDateEnd;
        } else {
          this.dateStart = this.defaultDateStart;
          this.dateEnd = this.defaultDateEnd;
        }
      } else {
        this.dateStart = '';
        this.dateEnd = '';
      }
    },
    setDate () {
      // 设置指定日期
      if (this.selData) {
        this.dateStart = this.selData.selDateStart;
        this.dateEnd = this.selData.selDateEnd;
      } else {
        this.dateStart = '';
        this.dateEnd = '';
      }
    },
  },
  created () {
    this.reset();
    if (this.selData) this.setDate();
  },
};
</script>

<style>
</style>
